[Q&A] vueの"Element is missing end tag"を解決したい

vueの"Element is missing end tag"を解決したい

環境

macOS 14.4.1(sonoma)
Docker version 25.0.5
viteでvueを構築

解決したいこと

vueのtemplateで条件が一致する場合のみtrタグを出力させたいが「Element is missing end tag.」のエラーになる。

例）
16進数文字列を00からffまでの256個を格納してある配列があります。
これをvueのtemplateでtableタグの中で
v-forで回してtdタグで表示させます。
このとき16個ごとにtrタグで閉じて改行させたい場合、
以下のコードでエラーが出ます。

<template>
  {{hexstrs}}
  <div>
    <table>
      <tr>
        <template v-for="(n, i) in hexstrs" :key="i">
          <td>
            <a>{{ i }}:{{ n }}</a>
          </td>
          <template v-if="((i + 1) % 16 === 0) && (i !== 0)">
            </tr><tr>
          </template>
        </template>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hexstrs: [],
    };
  },
  created() {
    this.hexstrs = Array.from({ length: 256 }, (_, index) =>
      index.toString(16).padStart(2, "0")
    );
  },
};
</script>

発生している問題・エラー

[plugin:vite:vue] Element is missing end tag.
/vue/src/views/Test.vue:10:11
8  |              <a>{{ i }}:{{ n }}</a>
9  |            </td>
10 |            <template v-if="((i + 1) % 16 === 0) && (i !== 0)">
   |             ^
11 |              </tr><tr>
12 |            </template>
    at createCompilerError (/vue/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:1329:17)
    at emitError (/vue/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2822:5)
    at Object.onclosetag (/vue/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2186:13)
    at Tokenizer.stateInClosingTagName (/vue/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:749:16)
    at Tokenizer.parse (/vue/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:1107:16)
    at Object.baseParse (/vue/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2861:13)
    at Object.parse (/vue/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.js:703:23)
    at Object.parse$2 [as parse] (/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:1851:24)
    at createDescriptor (file:///vue/node_modules/@vitejs/plugin-vue/dist/index.mjs:74:43)
    at handleHotUpdate (file:///vue/node_modules/@vitejs/plugin-vue/dist/index.mjs:2151:26

自分で試したこと

タグではなく文字列だとエラーになりません。

<template>
  {{hexstrs}}
  <div>
    <table>
      <tr>
        <template v-for="(n, i) in hexstrs" :key="i">
          <td>
            <a>{{ i }}:{{ n }}</a>
          </td>
          <template v-if="((i + 1) % 16 === 0) && (i !== 0)">
            ●
          </template>
        </template>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hexstrs: [],
    };
  },
  created() {
    this.hexstrs = Array.from({ length: 256 }, (_, index) =>
      index.toString(16).padStart(2, "0")
    );
  },
};
</script>

vue(vite)ではこういった書き方はNGなのでしょうか？

1Answer

@iiokazuya posted at 2024-05-11

少々トリッキーですね。
16アイテムずつ改行するのであれば、CSSのdisplay:gridとtemplate-grid-columnsを使ってみてはどうでしょう？

<ul style="display:grid; template-grid-columns:repeat(16,1fr)">
    <li v-for="item in items" :key="item">{{item}}</li>
</ul>

こんな感じとか

Comments

@devzooiiooz
Questioner
ご回答ありがとうございます。
grid-template-columnsでやってみたところ、うまくいきました!
<ul style="display:grid;grid-template-columns:repeat(16,1fr)"> <li v-for="item in hexstrs" :key="item" style="list-style:none;">{{item}}</li> </ul>
なるほど、そもそもtableでやろうと思っていたのがいけないのか…。
条件によってタグを閉じたい場合は他にもあると思うのですが、考えを変える必要がありますね。
大変参考になりました。ありがとうございました。
@iiokazuya
解決してよかったです